<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.content {
				width: 100%;
				height: 480px;
				margin: auto;
				position: relative;
			}

			.pic {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 480px;
				transition: opacity 0.5s linear;
			}

			.pic img {
				width: 100%;
				height: 480px;
			}

			.circle {
				width: 100%;
				height: 8px;
				position: absolute;
				bottom: 30px;
				left: 0;
				font-size: 0;
				line-height: 14px;
				z-index: 5;
				text-align: center;
			}

			.circle>div {
				margin: 0 15px;
				display: inline-block;
				width: 8px;
				height: 8px;
				border: 3px dashed transparent;
				margin: 0 2px;
				border-radius: 8px;
				background-clip: padding-box;
				vertical-align: middle;
				background-color: #f5f5f5;
			}

			.content .circle .focus {
				border: 3px solid #d93732;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div style="z-index: 5" class="pic"><a href=""><img src="img/20190124jhxdek.jpg" alt=""></a></div>
			<div style="z-index: 4" class="pic"><a href=""><img src="img/20190124tvnesh.jpg" alt=""></a></div>
			<div style="z-index: 3" class="pic"><a href=""><img src="./img/20190124bfbolz.jpg" alt=""></a></div>
			<div style="z-index: 2" class="pic"><a href=""><img src="img/20190124tvnesh.jpg" alt=""></a></div>
			<div style="z-index: 1" class="pic"><a href=""><img src="img/20190124bfbolz.jpg" alt=""></a></div>
			<div class="circle">
				<div></div>
				<div></div>
				<div class="focus"></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var speed = 1000;
	var content = document.getElementsByClassName("content")[0];
	var pic = document.getElementsByClassName("pic");
	var zindex = 0;
	var timer = null;
	var index = 0;
	var circle = document.getElementsByClassName("circle")[0].children;

	function move(res, count) {
		for (var k = 0; k < count; k++) {
			for (var i = 0; i < pic.length; i++) {
				zindex = parseInt(pic[i].style.zIndex);
				if (res == "right") {
					zindex++;
					if (zindex > pic.length) {
						zindex = 1;
						pic[i].style.opacity = "0";
					}
					if (zindex == pic.length) {
						pic[i].style.opacity = "1"
						index = i;
					}
				} else {
					zindex--;
					if (zindex == 0) {
						zindex = 6;
						pic[i].style.opacity = "1";
						index = i;
					} else if (zindex == pic.length - 1) {
						pic[i].style.opacity = "0";
					}
				}
				pic[i].style.zIndex = zindex;
				addColor();
			}
		}
	}

	function animate() {
		timer = setInterval(function() {
			move("right", 1);
		}, speed);
	}

	function addColor() {
		for (var i = 0; i < circle.length; i++) {
			if (index == i) {
				circle[i].className = "focus";
			} else {
				circle[i].className = "";
			}
		}

	}

	window.onload = function() {
		animate();
		addColor();
		content.onmouseenter = function() {
			clearInterval(timer);
		}
		content.onmouseleave = function() {
			animate();
		}

		for (var i = 0; i < circle.length; i++) {
			circle[i].index = i;
			circle[i].onmouseenter = function() {
				count = this.index - index > 0 ? this.index - index : circle.length + (this.index - index);
				move("right", count);
				index = this.index;
				addColor();
			}
		}
	}
</script>
